<!--
 * @description  : 市管-特殊区域检查详情
 * @descriptionDetail: 市管-特殊区域检查详情
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-10-20 10:57:44
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
    </theme-navbar>
    <!-- #endif -->
    <view class="content u-page">
      <view class="u-tabs-box">
        <u-tabs :list="tabList" :active-color="$theme.u_type_primary" :is-scroll="false" :current="currentTab" @change="changeTab"></u-tabs>
      </view>
      <!-- 检查事项 -->
      <view v-show="currentTab == 0">
        <view style="width: 100%;padding-left: 30rpx; padding-right: 30rpx;" class="first-top">
          <u-form :model="checkRecordForm" label-width="auto" label-position="top" ref="uForm">
            <view style="width: calc(100% - 30px);">
              <form-section title="区域检查"></form-section>
            </view>
            <u-form-item label="" :border-bottom="false">
              <view class="person-info">
                <view class="p-title">
                  <view class="doc-sub-title">
                    案件信息
                  </view>
                  <view
                    class="uicon-sty"
                    v-if="!isDisabled"
                    @click.native="addCheckCase()"
                  >
                    <u-icon name="plus-circle" :color="$theme.u_type_primary" size="40"></u-icon>
                  </view>
                </view>
                <view style="width: 100%">
                  <u-table font-size="26">
                    <u-tr class="u-tr border-left">
                      <u-th class="u-th" width="12%">
                        序号
                      </u-th>
                      <u-th width="40%" class="u-th">
                        案件编号
                      </u-th>
                      <u-th class="u-th">
                        案由
                      </u-th>
                    </u-tr>
                    <u-tr v-if="caseList.length == 0" class="u-tr border-left">
                      <u-td width="100%" class="u-th">
                        ~ 暂无数据 ~
                      </u-td>
                    </u-tr>
                    <template v-else>
                      <u-tr v-for="(item,index) in caseList" :key="item.caseUuid" class="u-tr border-left" :class="[index == 0 ? 'border-Top' : '']">
                        <u-td class="u-td" width="12%">
                          {{ index+1 }}
                        </u-td>
                        <u-td width="40%" class="u-td">
                          <text class="u-color" @click="itemDetail(item)">
                            {{ item.caseCode }}
                          </text>                            
                        </u-td>
                        <u-td class="u-td">
                          <text class="text-sl u-color" @click="casePropertyDetail(item)">
                            {{ item.caseProperty }}
                          </text>
                        </u-td>
                      </u-tr>
                    </template>
                  </u-table>
                </view>
              </view>
            </u-form-item>
            <u-form-item label="是否涉案">
              <u-radio-group v-model="checkRecordForm.isCase" :disabled="true" @change="radioGroupChange">
                <u-radio :name="0">
                  未涉案
                </u-radio>
                <u-radio :name="1">
                  发现并立案
                </u-radio>
              </u-radio-group>
            </u-form-item>
            <u-form-item label="检查情况">
              <u-input type="textarea" :disabled="isDisabled" :border="false" placeholder="请输入检查情况" v-model="checkRecordForm.checkExplain" />
            </u-form-item>
          </u-form>
        </view>
      </view>
      <!-- 信息采集 -->
      <view v-show="currentTab == 1">
        <view style="width: 100%;padding-left: 30rpx; padding-right: 30rpx;" class="first-top">
          <u-form :model="basicForm" :error-type="errorType" label-width="auto" label-position="left" ref="uBasicForm">
            <view style="width: calc(100% - 30px);">
              <form-section title="基础信息"></form-section>
            </view>
            <u-form-item :required="true" label="负责人" prop="manager">
              <u-input
                type="text"
                input-align="right"
                :border="false"
                :disabled="isDisabled"
                placeholder="请输入负责人"
                v-model="basicForm.manager"
              />
            </u-form-item>
            <u-form-item label="联系电话" prop="telephone">
              <u-input
                type="text"
                :border="false"
                input-align="right"
                :disabled="isDisabled"
                placeholder="请输入联系电话"
                v-model="basicForm.telephone"
              />
            </u-form-item>
            <u-form-item label="地址" label-position="top">
              <u-input
                type="text"
                :border="false"
                :disabled="isDisabled"
                placeholder="请输入地址"
                v-model="basicForm.address"
              />
            </u-form-item>
            <u-form-item label="经纬度">
              <u-input type="text" input-align="right" :disabled="true" :border="false" placeholder="请选择经纬度" v-model="basicForm.longLat" />
              <u-icon name="map-fill" :color="$theme.u_type_primary" size="44" @click="!isDisabled && setLocation()"></u-icon>
            </u-form-item>

            <u-form-item label="区域情况描述" label-position="top">
              <u-input type="textarea" :disabled="isDisabled" :border="false" placeholder="请输入区域情况描述" v-model="basicForm.areaDesc" />
            </u-form-item>
            <view style="margin: 0px -16px;">
              <u-gap :height="$theme.cm_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
            </view>
            <view style="width: calc(100% - 30px);">
              <form-section title="照片信息"></form-section>
            </view>
            <u-form-item label="场所照片" label-position="top">
              <view class="zk-img-content">
                <m-upload
                  :disabled="isDisabled"
                  :deletable="!isDisabled"
                  :maxCount="picIds"
                  width="150rpx"
                  height="150rpx"
                  :file-list="fileList"
                  :multiple="picIds==1?false:true"
                  index="fileList"
                  :uploadParam="{'fiGroupCode':$FILE_GROUP_TYPE.m_special_area_attr}"
                  upApiUrl="uploadBase64File"
                  ref="filePicUpload"
                  @on-list-change="changeUpload"
                >
                </m-upload>
              </view>
            </u-form-item>
          </u-form>
        </view>
      </view>
      <view class="submit-btns btn-other-cls" v-if="!isDisabled">
        <!-- 保存检查事项 -->
        <u-button v-if="currentTab == '0'" class="u-btn" type="primary" @click="saveCheckRecord">
          签离
        </u-button>
        <!-- 保存信息采集 -->
        <u-button v-if="currentTab == '1'" class="u-btn" type="primary" @click="saveBasic">
          保存
        </u-button>
      </view>
      <u-popup mode="bottom" height="30%" v-model="detailShow">
        <view class="content" style="padding: 40rpx;">
          <view style="position: fixed;top: 0;width: 100%;height: 30rpx;background-color: white;"></view>
          <view style="padding-bottom: 120rpx;">
            <u-row gutter="16">
              <u-col span="12">
                <text style="font-size: 30rpx;">
                  案由: {{ detailData.caseProperty }}
                </text>
              </u-col>
            </u-row>
          </view>
        </view>
      </u-popup>
      <!-- 检查结果选择 -->
      <u-popup mode="bottom" height="80%" border-radius="16" v-model="checkResultTypeOpen">
        <single-select :extHide="true" :title="'检查结果类型'" :mDatas="checkResultList" :selectedItem="{}" @m-select="checkResultSelected"></single-select>
      </u-popup>
    </view>
  </view>
</template>

<script>
import checkService from "@/service/check/check.service";
import commService from "@/service/common/common.service";
import FormSection from "@/components/form-section.vue";
import mUpload from "@/components/m-upload.vue";
import singleSelect from "@/components/single-select.vue";
import {M_COMMON_CHECK_STATUS,} from "@/service/check/mapping/enum.js";
import {
  CASE_TYPE,
  CASE_SOURCE,
} from "@/service/case/mapping/index.js";
export default {
  components:{
    FormSection,
    mUpload,
    singleSelect,
  },
  data() {
    return {
      CASE_TYPE,
      M_COMMON_CHECK_STATUS,
      errorType: ['border-bottom', 'message',],
      tabList:[{name:"检查事项",},{name:"信息采集",},],// tab栏目
      currentTab:0,
      picIds:20,
      checkRecordForm:{
        isCase:0,
        checkExplain:'',
      },
      basicForm:{

      },
      rules: {
        manager: [{
          required: true,
          trigger: ['blur', 'change',],
          message: '请输入负责人',
        },],
        telephone:[
          {
            validator: (rule, value) => {
              return !value || this.$u.test.mobile(value) || this.$u.test.tel(value);
            },
            message: '手机号码或座机号码不正确',
            trigger: ['change','blur',],
          },
        ],
      },
      isDisabled:false,
      fileList:[],
      areaParam:{},// 检查列表传过来的参数
      caseList:[],
      height:350,
      detailData:{},
      detailShow:false,
      checkResultTypeOpen:false,
      checkResultList:[{uid: CASE_TYPE.SIMPLE, name: '简易案件登记', exts: [],},{uid: CASE_TYPE.NORMAL, name: '普通案件登记', exts: [],},],
    }
  },
  onReady() {
    this.$refs.uBasicForm.setRules(this.rules);
  },
  onLoad() {
    this.areaParam = this.getRouteParam();
    this.isDisabled = this.areaParam.checkStatus == M_COMMON_CHECK_STATUS.CHECKED ? true : false;
    this.initRecordAndBasic();
    console.log('参数：' + JSON.stringify(this.areaParam));
  },
  onShow() {
    this.getRecordCaseList();
  },
  methods: {
    // 获取特殊区域-检查事项-检查详情、关联案件列表；特殊区域-信息采集-基础信息、图片信息
    initRecordAndBasic(){
      this.getRecordCaseList();
      this.getCheckRecordDetail();
      this.findBasicData();
      this.getFileList();
    },
    // 检查事项详情接口
    getCheckRecordDetail(){
      this.$modal.showLoading('加载中');
      checkService.getCheckRecordDetail({
        planAreaUuid:this.areaParam.planAreaUuid,
      }).then((rs) => {
        this.$modal.hideLoading();
        if(rs.success){
          this.checkRecordForm = rs.bean ? rs.bean : {isCase:this.caseList.length ? 1 : 0,};
        }else{
          this.$u.toast(rs.msg);
        }
      }).catch((err) => {
        this.$modal.hideLoading();
        this.$u.toast(err);
      });
    },
    // 获取检查事项的案件列表
    getRecordCaseList(){
      this.$modal.showLoading('加载中');
      checkService.queryRecordCaseList({
        planAreaUuid:this.areaParam.planAreaUuid,
      }).then((rs) => {
        this.$modal.hideLoading();
        if(rs.success){
          this.caseList = rs.data ? rs.data : [];
          this.checkRecordForm.isCase = this.caseList.length > 0 ? 1 : 0;
        }else{
          this.$u.toast(rs.msg);
        }
      }).catch((err) => {
        this.$modal.hideLoading();
        this.$u.toast(err);
      });
    },
    // 获取信息采集-基础数据
    findBasicData(){
      this.$modal.showLoading('加载中');
      checkService.findById({id:this.areaParam.areaUuid,}).then((rs) => {
        this.$modal.hideLoading();
        if(rs.success){
          this.basicForm = rs.bean ? rs.bean : {};
          if(this.basicForm.longitude && this.basicForm.latitude){
            this.basicForm.longLat = this.basicForm.longitude + ',' + this.basicForm.latitude;
          }
        }else{
          this.$u.toast(rs.msg);
        }
      }).catch((err) => {
        this.$modal.hideLoading();
        this.$u.toast(err);
      });
    },
    getFileList(){
      if(this.areaParam.areaUuid){
        this.$modal.showLoading('加载中');
        commService.goFiles(this.areaParam.areaUuid,this.$FILE_GROUP_TYPE.m_special_area_attr).then((rs) => {
          this.$modal.hideLoading();
          if(rs.success){
            if(rs.data.length > 0){
              rs.data.forEach((item) => {
                this.fileList.push({ fileId:item.gfiId,
                  gfiId:item.gfiId,}) ;
              });
            }
          }else{
            this.$u.toast(rs.msg);
          }
        }).catch((err) => {
          this.$modal.hideLoading();
          this.$u.toast(err);
        });
      }
    },
    changeTab(index){
      this.currentTab = index;
    },
    radioGroupChange(e) {
      this.checkRecordForm.isCase = e;
    },
    // 经纬度
    setLocation() {
      if (this.isDisabled) return;
      this.setRouteParam({disable:false,step:"start",})
      this.$u.route("pages/commonPage/modifyLocationMap");
    },
    // 数据返回操作
    updateBackState(obj) {
      let self = this;
      // 经纬度
      if (obj.pos) {
        self.$set(self.basicForm, "longLat", `${obj.pos.longitude},${obj.pos.latitude}`);
        self.$set(self.basicForm, "longitude", obj.pos.longitude);
        self.$set(self.basicForm, "latitude", obj.pos.latitude);
      }else if(obj.refreshCheck){
        this.getRecordCaseList();
        // this.checkRecordForm.isCase = 1;
      }
    },
    // 上传/删除图片事件
    changeUpload(list, key) {
      if (list.length > 0) {
        this.fileList = [...list,];
      } else {
        this.fileList = [];
      }
    },
    // 添加案件
    addCheckCase(){
      this.checkResultTypeOpen = true;
    },
    // 检查结果类型选择事件
    checkResultSelected(e){
      console.log(e);
      if(e.uid){
        this.checkResultTypeOpen = false;
        this.setRouteParam({
          initQueryData:{},
        });
        this.$u.route({
          url:'/pages/case/components/caseFilingLink',
          type:'to',
          params:{
            caseType: e.uid,
            checkUuid: this.areaParam.planAreaUuid,
            from:"specialAreasCheck",
            caseSource: e.uid == CASE_TYPE.NORMAL ? CASE_SOURCE.marketCheck : '', // 市场查获
            undertaker:this.areaParam.executorNames,
            undertakerUuid: this.areaParam.executors,
            applyCode: this.areaParam.applyCode || '',
            isSpecialAction: this.areaParam.isSpecialAction == '1',
            actionUuid: this.areaParam.actionUuid || '',
            actionName: this.areaParam.actionName || '',
          },
        });
      }else{
        this.$u.toast("请选择检查结果类型！");
        return;
      }

    },
    // 查看案件详情
    itemDetail(obj){
      this.setRouteParam({
        caseCode: obj.caseCode,
        caseUuid: obj.caseUuid,
        from: "areasCheck", // 主办人
      });
      this.$u.route('/pages/case/offline/caseInfo');
    },
    // 查看案由信息
    casePropertyDetail(obj){
      this.detailData = obj;
      this.detailShow = true;
    },
    // 保存检查事项
    saveCheckRecord(){
      let params = {
        ...this.checkRecordForm,
        checkPlanUuid: this.areaParam.checkPlanUuid,
        planAreaUuid:this.areaParam.planAreaUuid,
      };
      this.$u.loading("正在保存...");
      checkService.saveOrUpDateCheckRecord(params).then((rs) => {
        this.$u.hideLoading();
        if(rs.success){
          this.$u.toast("保存成功！");
          this.backPrev({
            paramKey: "refresh",
            param : true,
          });
        }else{
          this.$u.toast(rs.msg);
        }
      }).catch((err) => {
        this.$u.toast(err);
        this.$u.hideLoading();
      });
    },
    // 保存信息采集
    saveBasic(){
      this.$refs.uBasicForm.validate(valid => {
        if (!valid) return;
        if(this.fileList.length > 0){
          let list = this.fileList.map((itm) => {
            return {gfiId:itm.gfiId,}
          });
          this.basicForm.fileList = list;
        }
        let params = {
          ...this.basicForm,
          areaUuid: this.areaParam.areaUuid,
        };
        this.$u.loading("正在保存...");
        checkService.saveOrUpdateBasic(params).then((rs) => {
          this.$u.hideLoading();
          if(rs.success){
            this.$u.toast("保存成功！");
          }else{
            this.$u.toast(rs.msg);
          }
        }).catch((err) => {
          this.$u.toast(err);
          this.$u.hideLoading();
        });
      });
    },
  },
}
</script>

<style lang="scss" scoped>
.page{ padding:0; }
.u-tabs-box{
	width: 100%;
	position: fixed;
	z-index: 999;
	/* #ifdef H5-DINGDING || H5-WECHAT */
	top: 0px;
	/* #endif */
	/* #ifdef H5-ONLY  */
	top: 45px;
	/* #endif */
}

.first-top{
	
	margin-top: 40px;
}
// 承办人样式
.person-info {
  width: 100%;
  .p-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .doc-sub-required {
      position: absolute;
      left: -8px;
      vertical-align: middle;
      color: #fa3534;
      padding-top: 3px;
    }
    .uicon-sty {
      color: $u-type-primary;
      padding-left: 10px;
    }
  }
}
.text-sl{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 300rpx;
}
.u-color{
	color:$u_type_primary;
}
</style>
